<script setup lang="ts">
import { type NotifyOptions, notify, modal } from '@/widgets'

const opts = {
  title: '背影',
  content: '我与父亲不相见已二年余了，我最不能忘记的是他的背影。'
}

const opts1 = {
  content: '我与父亲不相见已二年余了，我最不能忘记的是他的背影。'
}

const opts2 = {
  title: '背影[请点击关闭]',
  content: '我与父亲不相见已二年余了，我最不能忘记的是他的背影。',
  duration: 0
}
const opts3 = {
  title: '背影',
  content: '我与父亲不相见已二年余了，我最不能忘记的是他的背影。',
  icon: 'mas-icon-model'
}
const opts40: NotifyOptions = {
  title: '背影',
  content: '我与父亲不相见已二年余了，我最不能忘记的是他的背影。',
  duration: 0,
  buttons: [
    {
      name: '取消',
      handle() {
        modal.message({ title: 'No!!', content: '请默写100遍《背影》!' })
      }
    },
    {
      name: '知道了',
      handle() {
        modal.message({ title: 'Good', content: '知道就好!' })
      }
    }
  ]
}
const opts41: NotifyOptions = {
  title: '背影',
  content: '我与父亲不相见已二年余了，我最不能忘记的是他的背影。',
  duration: 0,
  buttons: [
    {
      name: '取消',
      handle() {
        modal.message({ title: 'No!!', content: '请默写100遍《背影》!' })
      }
    },
    {
      name: '知道了',
      type: 'primary',
      handle() {
        modal.info({ title: 'Good', content: '知道就好!' })
      }
    }
  ]
}
const opts42: NotifyOptions = {
  title: '背影',
  content: '我与父亲不相见已二年余了，我最不能忘记的是他的背影。',
  duration: 0,
  buttons: [
    {
      name: '取消',
      handle() {
        modal.message({ title: 'No!!', content: '请默写100遍《背影》!' })
      }
    },
    {
      name: '知道了',
      type: 'success',
      handle() {
        modal.success({ title: 'Good', content: '知道就好!' })
      }
    }
  ]
}
const opts43: NotifyOptions = {
  title: '背影',
  content: '我与父亲不相见已二年余了，我最不能忘记的是他的背影。',
  duration: 0,
  buttons: [
    {
      name: '取消',
      handle() {
        modal.message({ title: 'No!!', content: '请默写100遍《背影》!' })
      }
    },
    {
      name: '知道了',
      type: 'warning',
      handle() {
        modal.warn({ title: 'Good', content: '知道就好!' })
      }
    }
  ]
}
const opts44: NotifyOptions = {
  title: '背影',
  content: '我与父亲不相见已二年余了，我最不能忘记的是他的背影。',
  duration: 0,
  buttons: [
    {
      name: '取消',
      handle() {
        modal.message({ title: 'No!!', content: '请默写100遍《背影》!' })
      }
    },
    {
      name: '知道了',
      type: 'danger',
      handle() {
        modal.error({ title: 'Good', content: '知道就好!' })
      }
    }
  ]
}
</script>
<template>
  <div class="notify-example pane-block">
    <div class="notify-example-main">
      <div class="notify-example-block">
        <div>Notify</div>
        <button class="button is-light" @click="notify.notify(opts1)">notify</button>
        <button class="button is-primary" @click="notify.info(opts1)">info</button>
        <button class="button is-success" @click="notify.success(opts1)">success</button>
        <button class="button is-warning" @click="notify.warn(opts1)">warn</button>
        <button class="button is-danger" @click="notify.error(opts1)">error</button>
      </div>
      <div class="notify-example-block">
        <div>With title</div>
        <button class="button is-light" @click="notify.notify(opts)">notify</button>
        <button class="button is-primary" @click="notify.info(opts)">info</button>
        <button class="button is-success" @click="notify.success(opts)">success</button>
        <button class="button is-warning" @click="notify.warn(opts)">warn</button>
        <button class="button is-danger" @click="notify.error(opts)">error</button>
      </div>
      <div class="notify-example-block">
        <div>Duration:0</div>
        <button class="button is-light" @click="notify.notify(opts2)">notify</button>
        <button class="button is-primary" @click="notify.info(opts2)">info</button>
        <button class="button is-success" @click="notify.success(opts2)">success</button>
        <button class="button is-warning" @click="notify.warn(opts2)">warn</button>
        <button class="button is-danger" @click="notify.error(opts2)">error</button>
      </div>
      <div class="notify-example-block">
        <div>Custom icon</div>
        <button class="button is-light" @click="notify.notify(opts3)">notify</button>
        <button class="button is-primary" @click="notify.info(opts3)">info</button>
        <button class="button is-success" @click="notify.success(opts3)">success</button>
        <button class="button is-warning" @click="notify.warn(opts3)">warn</button>
        <button class="button is-danger" @click="notify.error(opts3)">error</button>
      </div>
      <div class="notify-example-block">
        <div>Buttons</div>
        <button class="button is-light" @click="notify.notify(opts40)">notify</button>
        <button class="button is-primary" @click="notify.info(opts41)">info</button>
        <button class="button is-success" @click="notify.success(opts42)">success</button>
        <button class="button is-warning" @click="notify.warn(opts43)">warn</button>
        <button class="button is-danger" @click="notify.error(opts44)">error</button>
      </div>
    </div>
    <!-- <button -->
  </div>
</template>
<style lang="scss">
@import '@/widgets/var';

.notify-example {
  .notify-example-main {
    border-top: 1px solid $border;
    display: flex;
    flex-direction: row;
  }
  .notify-example-block {
    display: flex;
    flex-direction: column;
    padding: 0.5em;
    min-width: 8em;
    > div {
      font-weight: 600;
    }
    &:not(:first-child) {
      border-left: 1px solid $border;
    }
    .button {
      margin-top: 1em;
    }
  }
}
</style>
